<template>
    <div>
        <van-tag round type="primary" size="medium" class="tag-blue-light m-r-10" @click="getYear">近一年</van-tag>
        <!-- <van-tag round plain type="primary" @click="showDate('start')">选择日期<van-icon name="play" /></van-tag> -->
        <van-tag round plain type="default" size="medium" @click="showDate('start')">{{ currentValue.start }}</van-tag> -
        <van-tag round plain type="default" size="medium" @click="showDate('end')">{{ currentValue.end }}</van-tag>
        <van-popup v-model="date_range.show" position="bottom" :close-on-click-overlay="false">
            <van-datetime-picker
                v-if="date_range.show"
                v-model="date_range.currentDate"
                type="date"
                :title="'请选择'+ (date_range.type == 'start' ? '起始' : '终止') +'日期'"
                :min-date="date_range.minDate"
                :max-date="date_range.maxDate"
                @cancel="handleCancel"
                @confirm="getDate"
            />
        </van-popup>
    </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
        currentValue:{
        start: null,// '2021-05-11',
        end: null,// '2021-05-21',
      },
      date_range:{
        show: false,
        type: null,
        title: null,
        minDate: new Date(2023, 0, 1),
        maxDate: new Date(2030, 11, 31),
        currentDate: new Date(),
        currentStart: new Date(),
        currentEnd: new Date(),
      }
    };
  },
  created(){
    this.currentValue.start = moment().subtract(1,'year').format('YYYY-MM-DD');
    this.currentValue.end = moment().format('YYYY-MM-DD');
  },
  methods: {
    showDate(type){
      this.date_range.type = type;
      this.date_range.currentDate = new Date(this.currentValue[type]);
      if(type == 'start'){
        this.date_range.minDate = new Date(2023, 0, 1);
        this.date_range.maxDate = new Date(this.currentValue.end);
      }else{
        this.date_range.minDate = new Date(this.currentValue.start);
        this.date_range.maxDate = new Date(2030,11,31);
      }
      this.date_range.show = true;      
    },
    getDate(value){
      this.currentValue[this.date_range.type] = moment(value).format('YYYY-MM-DD');
      this.date_range.show = false;
      setTimeout(() => {
        if(this.date_range.type == 'start'){
            this.date_range.currentStart = new Date(this.currentValue.start);
            this.showDate('end');
        }else{
            this.date_range.currentEnd = new Date(this.currentValue.end);
            this.$emit('confirm', this.currentValue);
        }
      },500)
      
    },
    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = Number(month) < 10 ? "0" + month : month;
      day = Number(day) < 10 ? "0" + day : day;
      return year + "-" + month + "-" + day;
    },
    getYear(){
      this.currentValue.start = moment().subtract(1,'year').format('YYYY-MM-DD');
      this.currentValue.end = moment().format('YYYY-MM-DD');
      this.$emit('confirm',this.currentValue);
    },
    handleCancel(){
      this.date_range.show = false
      if(this.date_range.type == 'end'){
        this.$emit('confirm',this.currentValue);
      }    }
  },
};
</script>